<template>
    <div class="all">
      <div class="updowm">
        <div class="header">
            <!-- <div class="title">Wchime设备管理系统</div>
            <div class="upNav">
                <div class="loginname">
                <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                <div class="userInfo"><img
                    class="head"
                    :src="headshot"
                    alt=""
                > <span>{{ userInfo.name }}</span></div>
                </span>
                <el-dropdown-menu
                slot="dropdown"
                class="header-new-drop"
                >
                <el-dropdown-item
            
            @click.native="goManage('/userinfo')"
          >用户中心</el-dropdown-item>
          <el-dropdown-item
            divided
            @click.native="logout"
          >退出</el-dropdown-item>
        </el-dropdown-menu>

      </el-dropdown>
                </div>
                    <div class="navAll">
                    <div class="nav" @click="goManage('/manage/devices')">设备管理</div>
                    <div class="nav" @click="goManage('/manage/alarms')">告警列表</div>
                    <div class="nav" @click="goManage('/manage/rooms')">后台管理</div>
                    </div>
                    
                
                
            </div> -->
        </div>
        <div class="body">
            <!-- <div class="survey">
                <div class="surveyCh">
                    <div class="roomTit">房间概况</div>
                    <div class="roomContent">
                        <div class="romB">
                            <div class="rName">房间总数</div>
                            <div class="rCount">{{roomCount.roomtotal}}</div>
                        </div>
                        <div class="romB">
                            <div class="rName">可用房间数</div>
                            <div class="rCount">{{roomCount.roomable}}</div>
                        </div>
                        <div class="romB">
                            <div class="rName">未开放房间数</div>
                            <div class="rCount">{{roomCount.roomunable}}</div>
                        </div>
                    </div>
                </div>
                <div class="surveyCh">
                    <div class="roomTit">设备概况</div>
                    <div class="roomContent">
                        <div class="romB">
                            <div class="rName">设备总数</div>
                            <div class="rCount">{{deviceCount.total}}</div>
                        </div>
                        <div class="romB">
                            <div class="rName">在线</div>
                            <div class="rCount">{{deviceCount.online}}</div>
                        </div>
                        <div class="romB">
                            <div class="rName">离线</div>
                            <div class="rCount">{{deviceCount.offline}}</div>
                        </div>
                    </div>
                </div>
                <div class="surveyCh">
                    <div class="roomTit">告警列表</div>
                    <div class="roomContent alarmList">
                        <div class="listAlert" v-for="(item, index) in alartList">
                            <div class="roomName">{{item.room_name}}</div>
                            <div class="diviceName">{{item.device_name}}</div>
                            <div class="timeName">{{item.createtime}}</div>
                            <div class="statusName">{{item.reason}}</div>
                        </div>
                    </div>
                    </div>
            </div> -->
            <div class="rightcontent">
              <!-- <div class="room">
                <div class="roomT">房间列表</div>
                <div class="roomList">
                    <div v-for="(item, index) in roomDataList">
                        <roomList :roomData="item"></roomList>
                    </div>
                    
                </div>
                <div class="page"> 
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[page_size, 20, 50, 100, 200]"
                        :page-size="page_size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                        </el-pagination>
                    </div>
            </div> -->
            </div>
            
        </div>
        
      </div>
    </div>

  </template>
  
  <script>
  import roomList from '@/components/roomList/roomList.vue'
  import store from '@/store/index'
  import {getAlarm, DeviceCount, GetRoom, UserInfo} from "@/api/dataReq"
  import {getUserInfo} from '@/utils/auth'
  export default {
    name: 'Home',
    components: {
        roomList
    },
    data() {
      return {
        currentPage:1,
        total:10,
        page_size:10,
        alartList:[],
        deviceCount:{},
        roomCount:{},
        roomDataList:[],
        userInfo: {},
        headshot: '',
      }
    },
    created(){
        
        this.getAlartList()
        this.getDeviceCount()
        this.getRoom()
        // console.log(getUserInfo())
        this.getuserInfo()
    },
    methods:{
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.page_size = val
        this.getRoom()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val
        this.getRoom()
      },

      getAlartList(){
        var reqData = {recor:1}
        getAlarm(reqData).then(response => {
        if (response.code == '1') {
        //   console.log(response)
         this.alartList = response.data

        } else {
          
        }
      }).catch(error => {
        console.log('err', error)
        
      })
    },
    // 
    getDeviceCount(){
        var reqData = {}
        DeviceCount(reqData).then(response => {
        if (response.code == '1') {
        //   console.log(response)
        this.deviceCount = response.data[0]

        } else {
          
        }
      }).catch(error => {
        console.log('err', error)
        
      })
    },
    getRoom(){
        
        var reqData = {page_size:this.page_size, page_num:this.currentPage}
        GetRoom(reqData).then(response => {
        if (response.code == '1') {
        //   console.log(response)
         
         this.roomDataList = response.data
         this.roomCount = response.count
         this.total = response.total

        } else {
          
        }
      }).catch(error => {
        console.log('err', error)
        
      })
    },
    // 退出
    async logout() {
      await  this.$store.dispatch('user/Logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      
    },
    goManage(path){
        this.$router.push({ path: path})
    },
    getuserInfo() {
      var reqData  ={}
        UserInfo(reqData).then(response => {
          if (response.code == '1') {
            // console.log(response)
           this.userInfo = response.data[0]
           this.headshot =cfg.img_url +  this.userInfo.headshot
          } else {
            
          }
        }).catch(error => {
          console.log('err', error)
          
        })
        // console.log(getUserInfo())
      // this.userInfo = JSON.parse(getUserInfo())
      // this.headshot =cfg.img_url + this.userInfo.headshot
    //   console.log(this.userName)
    },

    }

  }
  </script>
  <style lang="scss" scoped>
    .all{
        background-color: rgba(3,0,3, 1);
        height: 100%;
        // width: 100vw;
        color: white;
    }
    .updowm{
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }
    .header{
        // height: 5vh;
        min-height: 50px;
        // max-height: 55px;
        min-width: 500px;
        // border: 1px solid red;
        background-color: rgba(11,44,108,1);
        color: white;
        .title{
            float: left;
            // line-height: 50px;
            margin-left: 10px;
            // margin-top: 20px;
            font-size: 20px;
            font-weight: 500;
            /* 文字间距 */
            letter-spacing: 5px;
            color: white;
            /* 禁止选中 */
            user-select: none;
            /* 文字阴影 */
            text-shadow: 4px 4px 3px rgba(0, 0, 0, .1);
        }
        .upNav{
            float: right;
            // line-height: 50px;
            display: flex;
            flex-direction: row;

            font-size: 13px;
            margin-right: 20px;

            .navAll{
                display: flex;
            flex-direction: row;
                .nav{
               
               margin-right: 10px;
               cursor: pointer;
           }
            }
            
        }
    }
    .body{
        // height: 650px;
        // height: 100%;
        // height: 90vh;
        padding: 5px;
        width: 100%;
        display: flex;
        flex-direction: row;
        // border: solid 1px red;
    }
    .survey{
        width: 23%;
        min-width: 350px;
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        .surveyCh{
          height: 30%;
          min-height: 180px;

            // border: 1px solid yellow;
            margin-top: 10px;
            text-align: center;
        }
    }
    .roomTit{
        width: 100%;
        height: 40px;
        background-color: rgba(11,44,108,1);
        line-height: 40px;
        font-size: 14px;
    }
    .roomContent{
        display: flex;
        flex-direction: row;
        // height: 100%;
        height: 100%;
        background-color: rgba(1,18,67, 1);
        .romB{
            display: flex;
            flex-direction: column;
            width: 110px;
            height: 160px;
            font-size: 15px;
            .rName{
                height: 80px;
                line-height: 80px;
            }
            .rCount{
                height: 80px;
                line-height: 80px;
            }
        }
    }
    .listAlert{
        width: 350px;
        height: 30px;
        display: flex;
        flex-direction: row;
        // align-items: center;
        justify-content: space-around;

        border-bottom: 1px solid rgba(2,40,114, 1);
        line-height: 30px;
        .statusName{
            color: red;
        }
    }

  .rightcontent{
    height: 100%;
    // width: 100%;
    min-height: 500px;
    width: 76%;

    // position: relative;
    background-color: rgba(1,18,67, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // margin-left: auto;
    // margin-right: auto;
    // margin-top: 10px;
  }
.room{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // width: 76%;
    height: 100%;
    // border: 1px solid red;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(1,18,67, 1);
    margin-top: 10px;
    // top: 10px;
    .roomT{
        
        height: 40px;
        width: 100%;
        background-color: rgba(11,44,108,1);
        text-align: left;
        text-indent: 20px;
        line-height: 40px;
        font-size: 15px;
        // margin-top: 10px;
        
    }
    .roomList{
      border: solid 1px red;
        height: 50%;
        // min-height: 900px;
        background-color: rgba(1,18,67, 1);
        position: relative;
        overflow-y: scroll;
        overflow-x: hidden;
        // overflow-y: hidden;
        &::-webkit-scrollbar {
          width: 0;
        }
        
    }
    .page{
            // height: 20px;
            // position: absolute;
            // margin: 10px 300px;
            // margin-right: auto;
            // bottom: 10px;
            // left: auto;
            // right: auto;
            align-items: center;
            
            
        }
}
.alarmList{
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
	overflow-x: hidden;
	// overflow-y: hidden;
	&::-webkit-scrollbar {
      width: 0;
    }
}

/deep/ .el-input__inner {
    background-color: rgba(1,18,67, 1);
    border-color: rgba(11,44,108,1);
    color: white;
}
/deep/ .number {
    background-color: rgba(1,18,67, 1);
    border-color: rgba(11,44,108,1);
    color: white;
}
/deep/ .el-pagination .btn-prev {
    background-color: rgba(1,18,67, 1);
    border-color: rgba(11,44,108,1);
    color: white;
}
/deep/ .el-pagination .btn-next {
    background-color: rgba(1,18,67, 1);
    border-color: rgba(11,44,108,1);
    color: white;
}
/deep/ .el-pagination__total {
   
    color: white;
}
/deep/ .el-pagination__jump {
    
    color: white;
}


.loginname {
    display: flex;
    align-items: center;
    .head {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin: 0 15px;
    }
    .cart {
      display: flex;
      align-items: center;
      color: #ffffff;
      margin: 0 20px 0 10px;
      span {
        margin: 0 10px;
        font-size: 12px;
        display: flex;
        align-items: center;
      }
    }
  }
  .userInfo {
    display: flex;
    align-items: center;
    margin-right: 10px;
  }


::v-deep {
  .el-dropdown {
    color: #ffffff;
    cursor: pointer;
  }
  .el-dropdown {
    color: #ffffff;
    cursor: pointer;
  }

  // 下拉菜单的字体颜色
  .el-dropdown-menu__item {
    color: #918e8e;
  }

  // 下拉选择的背景和字体颜色
  .el-dropdown-menu__item:not(.is-disabled):hover {
    background: #eaecee;
    color: #2b2a2a;
  }

  // 去掉下拉菜单的三角形
  .popper__arrow {
    display: none;
  }
}

</style>